<template>
  <div>
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['生产管理']" currentMenu="计件工资明细"></crumbs>
    <a-card :bordered="false" style="margin-top: 12px">
      <a-button @click="handleShowFilter" icon="filter"
        >筛选 <span class="filter-num" style="margin-left: 5px">{{ ' ' + filteredNums }}</span></a-button
      >
      <a-button @click="showColumn" icon="unordered-list" class="btns">设置列</a-button>
      <div class="right-btn">
        <!-- <a-button @click="importFile">导入</a-button> -->
        <a-button @click="exportFile" type="primary" icon="upload">导出</a-button>
      </div>
      <a-table
        size="middle"
        :key="tableKey"
        :scroll="{ x: scrollX, y: 'calc(100vh - 366px)' }"
        :hideDefaultSelections="false"
        :columns="columns"
        :dataSource="modelList"
        :pagination="false"
        @change="tableChange"
        class="j-table-force-nowrap"
        :components="drag(columns, 'PIECE_PAY_DETAILS')"
      >
        <!-- 行信息 -->
        <span
          slot="orderCode"
          :title="text"
          slot-scope="text, record"
          class="btn-text"
          @click="handleDetail(record.orderId, '/workOrderDetail', '/workManagement/piecePayDetails')"
        >
          {{ text || '-' }}
        </span>
        <div slot="batchCode" slot-scope="text, record" class="btn-text ant-table-row-cell-ellipsis" :title="text" @click="batchRecord(record)">{{text|| '-'}}</div>
        <span slot="processName" :title="text" slot-scope="text">
          {{  text }}
        </span>
        <span slot="goodName" :title="text" slot-scope="text">
          {{  text }}
        </span>
        <span slot="spec" :title="text" slot-scope="text">
          {{  text }}
        </span>
        <span slot="qualifiedAmount" :title="numFormat(text)" slot-scope="text">
          {{ numFormat(text) }}
        </span>
        <span slot="qualifiedPrice" :title="numFormat(text)" slot-scope="text">
          {{ numFormat(text) }}
        </span>
        <span slot="notQualifiedAmount" :title="numFormat(text)" slot-scope="text">
          {{ numFormat(text) }}
        </span>
        <span slot="notQualifiedPrice" :title="numFormat(text)" slot-scope="text">
          {{ numFormat(text) }}
        </span>
        <!-- 输入框搜索 -->
        <div slot="searchInput" slot-scope="{ selectedKeys, confirm, clearFilters, column }" class="searchWorkOreder">
          <a-input
            placeholder="请输入"
            v-model="filterForm[column.dataIndex]"
            style="width: 188px; display: block"
            @pressEnter="handleSearch"
          />
          <a-button
            type="primary"
            style="width: 80px; margin-left: 20px; display: block"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex, clearFilters)"
          >
            搜索
          </a-button>
        </div>
        <a-icon
          slot="searchIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <!-- 选择搜索 -->
        <div slot="selectDropdown" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
          <a-select
            mode="multiple"
            allowClear
            placeholder="请选择"
            style="width: 200px"
            v-model="filterForm['pricingType']"
            @change="(v) => changeStatus(v, 'pricingType')"
          >
            <!-- <a-select-option value="finished_product">成品</a-select-option> -->
            <a-select-option v-for="type in typeList" :key="type.value" :value="type.value">{{
              type.text
            }}</a-select-option>
          </a-select>
          <a-button
            type="primary"
            style="width: 80px; margin-left: 20px; display: block"
            @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
          >
            搜索
          </a-button>
        </div>
        <a-icon
          slot="selectIcon"
          slot-scope="filtered"
          type="filter"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <!-- 日期搜索 -->
        <div slot="datePicker" slot-scope="{confirm, clearFilters, column}" class='searchWorkOreder'>
          <a-range-picker
            style="width:188px"
            v-model="dateForm[column.dataIndex]"
            format="YYYY-MM-DD"
            :placeholder="['开始时间', '结束时间']"
            @change="(v) => onOk(v, column.dataIndex)"
          />
          <a-button type="primary" style="width: 80px; margin-left: 20px;display: block;" @click="() => handleSearch(confirm, column.dataIndex,clearFilters)">
            搜索
          </a-button>
        </div>
        <!-- 人员选择 现版本不做 -->
        <!-- <div slot="selectPeople" slot-scope="{confirm, clearFilters, column }" class='searchWorkOreder'>
          <j-select-user-by-dep @changeRow="userPrinc" v-model="filterForm[column.dataIndex]" :seldep='true' :modalWidth="1000" :multi="true"></j-select-user-by-dep>
          <a-button type="primary" style="width: 80px; margin-left: 20px;display: block;" @click="() => handleSearch(confirm, column.dataIndex,clearFilters)">
            搜索
          </a-button>
        </div>
        <a-icon slot="peopleIcon" slot-scope="filtered" type="filter" :style="{ color: filtered ? '#108ee9' : undefined }" /> -->
      </a-table>
      <SetColumn
        columnName="设置列"
        ref="SetColumn"
        v-if="showSetColumn"
        @sureBtn="sureBtn"
        @cancelBtn="showSetColumn = false"
      />
    </a-card>
    <a-drawer placement="right" width="500" :visible="showFilter" @close="closeFilter">
      <div class="filter-body">
        <div slot="title" class="uni-card filter-tit">
          筛选 <span class="filter-num">{{ filteredNums }}</span>
        </div>
        <div class="uni-card" v-if="filteredNums > 0" style="background: #fff">
          <div v-for="(item, i) in filteredList" :key="i" v-show="item.text" class="tag-wrap">
            <span class="filter-tag" @click="delFiltered(item.key)">
              <span class="tag-text">{{ `${item.title}：${item.text}` }}</span>
              <a-icon type="close" style="float: right" />
            </span>
          </div>
        </div>
        <div style="overflow-y: scroll; flex: 1; padding: 0">
          <div class="uni-card" style="background: #fff">
            <a-form-model ref="ruleForm" layout="vertical" :model="filterForm">
              <a-form-model-item label="工单编号">
                <a-input v-model="filterForm.orderCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="批次编号">
                <a-input v-model="filterForm.batchCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="产品编号">
                <a-input v-model="filterForm.goodCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="产品名称">
                <a-input v-model="filterForm.goodName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="规格">
                <a-input v-model="filterForm.spec" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="工序编号">
                <a-input v-model="filterForm.processCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="工序名称">
                <a-input v-model="filterForm.processName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="操作人">
                <a-input v-model="filterForm.operator" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="计价方式">
                <a-select
                  mode="multiple"
                  allowClear
                  placeholder="请选择"
                  style="width: 100%"
                  v-model="filterForm['pricingType']"
                  @change="(v) => changeStatus(v, 'pricingType')"
                >
                  <a-select-option v-for="type in typeList" :key="type.value" :value="type.value">{{
                    type.text
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="提交时间">
                <a-range-picker
                  style="width:100%"
                  v-model="dateForm['commitTime']"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="(v) => onOk(v, 'commitTime')"
                />
              </a-form-model-item>
              <a-form-model-item label="提交人">
                <a-input v-model="filterForm.commitUserName" placeholder="请输入" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
        <div class="footer-submit">
          <a-button class="margin-btn" @click="resetFilter">重置</a-button>
          <a-button type="primary" @click="handleFilter">确定</a-button>
        </div>
      </div>
    </a-drawer>
    <!-- 全选/分页 -->
    <div
      class="uni-card"
      :style="{
        position: 'fixed',
        bottom: 0,
        right: 0,
        left: collapsed ? '79px' : '208px',
        background: '#fff',
        paddingLeft: '50px',
      }"
    >
      <div style="display: inline-block">
        <span>
          {{ `共${total}条` }}
        </span>
      </div>
      <div style="display: inline-block; float: right">
        <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <batch-production ref="BatchProduction"></batch-production>
    <windowDetail ref="windowDetail"></windowDetail>
  </div>
</template>
<script>
import SetColumn from '@/pubComponent/SetColumn.vue'
import crumbs from '@/components/crumbs.vue'
import { getNewColumns, subStrText, camelCase2UnderLine, numFormat } from '@/utils/util'
import { API } from '@/api/requestFzs'
import { mapState } from 'vuex'
import moment from 'moment'
import { downFilePost } from '@/api/manage'
import BatchProduction from '@/pubComponent/BatchProduction'
import windowDetail from '@/views/workManagement/workOrder/workOrderDetail'

import tableDragResize from '@/mixins/tableDragResize'
// 表头
/* 打开设置列面板123 */
const columnsValue = [
  {
    title: '工单编号',
    width: 180,
    dataIndex: 'orderCode',
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'orderCode',
    },
  },
  {
    title: '批次编号',
    width: 180,
    dataIndex: 'batchCode',
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'batchCode',
    },
  },
  {
    title: '产品编号',
    width: 180,
    ellipsis: true,
    dataIndex: 'goodCode',
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'goodCode',
    },
  },
  {
    title: '产品名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'goodName',
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'goodName',
    },
  },
  {
    title: '规格',
    width: 100,
    ellipsis: true,
    dataIndex: 'spec',
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'spec',
    },
  },
  {
    title: '工序编号',
    width: 180,
    dataIndex: 'processCode',
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'processCode',
    },
  },
  {
    title: '工序名称',
    width: 150,
    dataIndex: 'processName',
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'processName',
    },
  },
  {
    title: '报工单位',
    width: 100,
    ellipsis: true,
    dataIndex: 'reportingUnit',
  },
  {
    title: '操作人',
    width: 150,
    ellipsis: true,
    dataIndex: 'operator',
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'operator',
    },
  },
  {
    title: '合格数',
    width: 100,
    ellipsis: true,
    dataIndex: 'qualifiedAmount',
    scopedSlots: { customRender: 'qualifiedAmount' },
  },
  {
    title: '合格品单价（元/报工单位）',
    ellipsis: true,
    width: 200,
    dataIndex: 'qualifiedPrice',
    scopedSlots: { customRender: 'qualifiedPrice' },
  },
  {
    title: '不合格数',
    width: 100,
    ellipsis: true,
    dataIndex: 'notQualifiedAmount',
    scopedSlots: { customRender: 'notQualifiedAmount' },
  },
  {
    title: '不合格品单价（元/报工单位）',
    ellipsis: true,
    width: 230,
    dataIndex: 'notQualifiedPrice',
    scopedSlots: { customRender: 'notQualifiedPrice' },
  },
  {
    title: '计件工资合计（元）',
    ellipsis: true,
    width: 150,
    dataIndex: 'amountText',
  },
  {
    title: '计价方式',
    width: 100,
    ellipsis: true,
    dataIndex: 'pricingType',
    scopedSlots: {
      filterDropdown: 'selectDropdown',
      filterIcon: 'selectIcon',
      customRender: 'pricingType',
    },
  },
  {
    title: '提交时间',
    width: 180,
    ellipsis: true,
    dataIndex: 'commitTime',
    // scopedSlots: {
    //   filterDropdown: 'datePicker',
    //   filterIcon: 'dateIcon',
    //   customRender: 'commitTime',
    // },
  },
  {
    title: '提交人',
    width: 150,
    ellipsis: true,
    dataIndex: 'commitUserName',
    // scopedSlots: {
    //   filterDropdown: 'searchInput',
    //   filterIcon: 'searchIcon',
    //   customRender: 'commitUserName',
    // },
  },
]
export default {
  
  mixins: [tableDragResize],
  data() {
    return {
      numFormat,
      subStrText,
      //全选按钮
      showFilter: false, // 筛选抽屉
      modelList: [], // 列表数据
      showSetColumn: false, // 显示
      //全选按钮
      indeterminate: false,
      checkAll: false,
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      columns: [
        {
          title: '工单编号',
          width: 180,
          dataIndex: 'orderCode',
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'orderCode',
          },
        },
         {
            title: '批次编号',
            width: 180,
            dataIndex: 'batchCode',
            ellipsis: true,
            scopedSlots: {
              filterDropdown: 'searchInput',
              filterIcon: 'searchIcon',
              customRender: 'batchCode',
            },
          },
        {
          title: '产品编号',
          width: 180,
          ellipsis: true,
          dataIndex: 'goodCode',
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'goodCode',
          },
        },
        {
          title: '产品名称',
          width: 150,
          ellipsis: true,
          dataIndex: 'goodName',
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'goodName',
          },
        },
        {
          title: '规格',
          width: 100,
          ellipsis: true,
          dataIndex: 'spec',
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'spec',
          },
        },
        {
          title: '工序编号',
          width: 180,
          dataIndex: 'processCode',
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'processCode',
          },
        },
        {
          title: '工序名称',
          width: 150,
          dataIndex: 'processName',
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'processName',
          },
        },
        {
          title: '报工单位',
          width: 100,
          ellipsis: true,
          dataIndex: 'reportingUnit',
        },
        {
          title: '操作人',
          width: 150,
          ellipsis: true,
          dataIndex: 'operator',
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'operator',
          },
        },
        {
          title: '合格数',
          width: 100,
          ellipsis: true,
          dataIndex: 'qualifiedAmount',
          scopedSlots: { customRender: 'qualifiedAmount' },
        },
        {
          title: '合格品单价（元/报工单位）',
          ellipsis: true,
          width: 200,
          dataIndex: 'qualifiedPrice',
          scopedSlots: { customRender: 'qualifiedPrice' },
        },
        {
          title: '不合格数',
          width: 100,
          ellipsis: true,
          dataIndex: 'notQualifiedAmount',
          scopedSlots: { customRender: 'notQualifiedAmount' },
        },
        {
          title: '不合格品单价（元/报工单位）',
          ellipsis: true,
          width: 230,
          dataIndex: 'notQualifiedPrice',
          scopedSlots: { customRender: 'notQualifiedPrice' },
        },
        {
          title: '计件工资合计（元）',
          ellipsis: true,
          width: 150,
          dataIndex: 'amountText',
        },
        {
          title: '计价方式',
          width: 100,
          ellipsis: true,
          dataIndex: 'pricingType',
          scopedSlots: {
            filterDropdown: 'selectDropdown',
            filterIcon: 'selectIcon',
            customRender: 'pricingType',
          },
        },
        {
          title: '提交时间',
          width: 180,
          ellipsis: true,
          dataIndex: 'commitTime',
          // scopedSlots: {
          //   filterDropdown: 'datePicker',
          //   filterIcon: 'dateIcon',
          //   customRender: 'commitTime',
          // },
        },
        {
          title: '提交人',
          width: 150,
          ellipsis: true,
          dataIndex: 'commitUserName',
          // scopedSlots: {
          //   filterDropdown: 'searchInput',
          //   filterIcon: 'searchIcon',
          //   customRender: 'commitUserName',
          // },
        },
      ],
      filterForm: {
        orderCode: '',
        batchCode: '',
        goodCode: '',
        goodName: '',
        spec:'',
        processCode: '',
        processName: '',
        operator: '',
        commitUserName: '',
        startTime: '',
        commitTime: '',
        endTime: '',
        pricingType: undefined,
      },
      dateForm: {},
      filteredFormLable: {
        orderCode: '工单编号',
        batchCode: '批次编号',
        goodCode: '产品编号',
        goodName: '产品名称',
        spec:'规格',
        processCode: '工序编号',
        processName: '工序名称',
        operator: '操作人',
        pricingType: '计价方式',
        commitTime: '提交时间',
        commitUserName: '提交人',
      },
      sortForm: {
        sortType: '',
        sortColumn: '',
      },
      queryForm: {},
      typeList: [
        {
          value: 'regular',
          text: '常规计价',
        },
        {
          value: 'planned_output',
          text: '计划产量计价',
        },
      ],
      tableKey: 1.9
    }
  },
  components: {
    SetColumn,
    crumbs,
    BatchProduction,
    windowDetail
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        if (key == 'pricingType' && this.filterForm[key]) {
          list.push({
            title: this.filteredFormLable[key],
            text: this.typeToText(this.filterForm[key]),
            key,
          })
        } else if (key == 'commitTime') {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm.startTime ? moment(this.filterForm.startTime).format('YYYY-MM-DD') + '-' + moment(this.filterForm.endTime).format('YYYY-MM-DD') : '',
            key
          })
        } else if (key == 'startTime' || key == 'endTime') {
          // 什么都不做
        } else {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm[key],
            key,
          })
        }
      }
      return list
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (!!this.filterForm[key] || this.filterForm[key] === 0) {
          nums += 1
          if (key == 'startTime') {
            nums -= 1
          }
        }
      }
      return nums
    },
  },
  created() {
    if (this.$route.query.from) {
      let item = JSON.parse(this.$route.query.item)
      this.filterForm.operator = item.operator
      this.queryForm = {
        operatorID: item.operatorID,
      }
      this.filterForm[`startTime`] = item.reportWorkTimeBegin
      this.filterForm[`endTime`] = item.reportWorkTimeEnd
      this.dateForm.commitTime = [item.reportWorkTimeBegin, item.reportWorkTimeEnd]
    }
    this.initData()
    this.requestData()
  },
  mounted() {},
  methods: {
    // 批次生产记录弹窗列表
    batchRecord(record) {
      let obj = {
        id: record.batchId,
        orderId: record.orderId,
        batchCode: record.batchCode,
      }
      this.$refs.BatchProduction.showModal(obj,'E')
    },
    /* 时间选择 */
    onOk(value, key) {
      if (value.length == 0) {
        this.filterForm[`startTime`] = ''
        this.filterForm[`endTime`] = ''
        this.filterForm[key] = ''
        return
      }
      this.filterForm[`startTime`] = moment(value[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.filterForm[`endTime`] = moment(value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    },
    changeStatus(v, key) {
      if (v.length == 0) {
        this.filterForm[key] = undefined
      }
    },
    // 物料类型转文字
    typeToText(v) {
      let text = []
      let typeObj = {}
      for (let i = 0; i < this.typeList.length; i++) {
        const element = this.typeList[i]
        typeObj[element.value] = element.text
      }
      console.log(typeObj)
      v.forEach((value) => {
        text.push(typeObj[value])
      })
      return text.join(',')
    },
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('看看这是啥33：', sorter)
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: camelCase2UnderLine(sorter.columnKey),
        }
        this.requestData()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: '',
        }
        this.requestData()
      }
    },
    /* 选人 */
    userPrinc(storeVals, row) {
      let uIds = []
      if (row.length > 0) {
        row.forEach((u) => {
          uIds.push(u.id)
        })
        this.filterForm.createByText = uIds.join(',')
      } else {
        this.filterForm.createByText = ''
      }
      this.handleSearch()
    },
    handleSearch(selectedKeys, confirm, dataIndex, clearFilters) {
      // confirm() //用来关闭搜索弹窗
      // clearFilters() //用来重置搜索内容
      // console.log('这都是啥00：', selectedKeys)
      // console.log('这都是啥11：', confirm)
      // console.log('这都是啥22：', dataIndex)
      // console.log('这都是啥33：', clearFilters)
      this.current = 1
      this.requestData()
    },
    /* 打开筛选 */
    handleShowFilter() {
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
    /* 确定筛选 */
    handleFilter() {
      this.handleSearch()
      this.showFilter = false
    },
    /* 删除已选 */
    delFiltered(key) {
      if (key == 'pricingType') {
        this.filterForm[key] = undefined
      } else if (key == 'commitTime') {
        this.filterForm[key] = ''
        this.filterForm.startTime = '',
        this.filterForm.endTime = ''
        this.dateForm.commitTime = null
      } else {
        this.filterForm[key] = ''
      }
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        orderCode: '',
        goodCode: '',
        goodName: '',
        spec:'',
        processCode: '',
        processName: '',
        operator: '',
        pricingType: undefined,
      }
      this.dateForm = {}
      this.handleSearch()
    },
    /* 初始/加载设置列 */
    initData() {
      var oldValue = localStorage.getItem(this.BUSI_CONST.Entity.PIECE_PAY_DETAILS)
      this.columns = getNewColumns(columnsValue, JSON.parse(oldValue), null, this.columns)
    },
    /* 请求列表数据 */
    requestData() {
      let obj = {}
      for (let key in this.filterForm) {
        if (this.filterForm[key]) {
          if (key == 'pricingType' && this.filterForm[key]) {
            obj[key] = this.filterForm[key].join(',')
          } else {
            obj[key] = this.filterForm[key]
          }
        }
      }
      let parameter = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...obj,
        ...this.sortForm,
        ...this.queryForm
      }
      API.queryPieceRateDetailsPageList(parameter).then((res) => {
        if (res.code == 200) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          this.modelList = res.result.records
        }
      })
    },
    /* 打开设置列面板123 */
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(columnsValue, this.BUSI_CONST.Entity.PIECE_PAY_DETAILS, this.columns)
      })
    },
    /* 设置列 */
    sureBtn(emitArr) {
      this.columns = getNewColumns(columnsValue, emitArr, null)
      console.log(this.columns)
      localStorage.setItem(this.BUSI_CONST.Entity.PIECE_PAY_DETAILS, JSON.stringify(emitArr))
      this.tableKey += 1
    },
    /* 导入 */
    importFile() {},
    /* 导出 */
    exportFile() {
      let that = this
      // 获取动态列
      let filedKeysList = []
      that.columns.forEach((keys) => {
        filedKeysList.push(keys.dataIndex)
      })
      // filedKeysList.pop()//删除最后一个的操作列
      let filedKeys = filedKeysList.join(',')
      //设置文件名
      let fileName = `计件工资明细（${moment().format('YYYY-MM-DD HH:mm')}）`
      let param = {
        ...that.filterForm,
        ...that.sortForm,
        fileName: fileName,
        filedKeys: filedKeys,
      }
      for (let key in param) {
        if (!!param[key] || param[key] === 0) {
          // nothing
        } else {
          delete param[key]
        }
      }
      that.$antdConfirm({
        title: `确定导出全部数据?`,
        onOk() {
          console.log(param, '导出选中数据param')
          downFilePost('/mess/pieceRateExt/exportPieceRateDetailsXls', param).then((data) => {
            if (data.type == 'application/json') {
              const reader = new FileReader() //创建一个FileReader实例
              reader.readAsText(data, 'utf-8') //读取文件,结果用字符串形式表示
              reader.onload = function () {
                //读取完成后,**获取reader.result**
                const msg = JSON.parse(reader.result)
                that.$antdMessage.error(msg.message) //弹出错误提示
              }
              return
            }
            if (!data) {
              this.$antdMessage.error('导出失败')
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
            } else {
              let url = window.URL.createObjectURL(new Blob([data]))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', fileName + '.xls')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
            }
          })
        },
        onCancel() {},
      })
    },
    /* 详情 */
    handleDetail(id, path, from) {
      if (id) {
        // this.$openWay(this, true, path, { id, from })
        this.$refs.windowDetail.initDetail({id})
      } else {
        this.$antdMessage.info('该明细暂无工单')
      }
    },
    //点击返回按钮
    goBack() {
      if (this.$route.query.from) {
        this.$router.push(this.$route.query.from)
      }
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData()
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData()
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.btn-text-none {
  color: #888888;
}
a {
  margin: 0;
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.header {
  width: 150%;
  margin: -12px -12px @distance4;
}
.backBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .backC {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
.j-table-force-nowrap {
  margin-top: @distance1;
}
.btns {
  margin-left: @distance5;
}
.right-btn {
  float: right;
  display: flex;
  justify-content: flex-end;
}
.mg-left {
  margin-left: @distance3;
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
/deep/ .ant-card-body {
  height: calc(100vh - 214px);
  overflow: hidden;
  padding: 20px 16px;
}
</style>
